<template>
  <div class="role">
    <PageHeader
      :form-config="formConfig"
      @select-click="handleSelectClick"
      @reset-click="handleResetClick"
    />
    <PageContent
      :table-config="tableConfig"
      ref="pageContentRef"
      table-name="role"
      @create-click="handleCreateClick"
      @edite-click="handleEditeClick"
    />
    <PageDialog
      :dialog-config="dialogConfig"
      table-name="role"
      ref="pageDialogRef"
      :edite-data="editeData"
    />
  </div>
</template>

<script setup lang="ts">
import PageHeader from '@/components/page-header/PageHeader.vue';
import PageContent from '@/components/page-content/PageContent.vue';
import PageDialog from '@/components/page-dialog/PageDialog.vue';

import { formConfig } from './config/form-config';
import { tableConfig } from './config/table-config';
import { dialogConfig } from './config/dialog-config';

import useSearch from '@/hooks/useSearch';
import useDialog from '@/hooks/useDialog';

const [handleSelectClick,handleResetClick,pageContentRef] = useSearch()
const [
    pageDialogRef,
    editeData,
    handleCreateClick,
    handleEditeClick  ] = useDialog()
</script>

<style scoped>

</style>